<template>
  <custom-layout :isTabBar="false" navTitle="添加菜单">
    <view class="update">
      <view class="form-card">
        <uni-forms ref="valiForm" :modelValue="model" :rules="rules" label-position="top">
          <uni-forms-item name="parentId" label="父级菜单">
            <custom-tree-selected v-model="model.parentId" :localdata="menuData" :fieldsName="fieldsName" />
          </uni-forms-item>
          <uni-forms-item name="menuName" label="菜单名称">
            <uni-easyinput type="text" v-model="model.menuName" placeholder="请输入菜单名称" />
          </uni-forms-item>
          <uni-forms-item name="menuIcon" label="菜单图标">
            <uni-easyinput type="text" v-model="model.menuIcon" />
          </uni-forms-item>
          <uni-forms-item name="orderNum" label="显示顺序">
            <uni-number-box v-model="model.orderNum" />
          </uni-forms-item>
          <uni-forms-item name="menuType" label="菜单类型">
            <uni-data-checkbox v-model="model.menuType" :localdata="typeData" @change="menuTypeChange" />
          </uni-forms-item>

          <template v-if="model.menuType === 0">
            <uni-forms-item name="menuPath" label="路由地址">
              <uni-easyinput type="text" v-model="model.menuPath" placeholder="请输入路由地址" />
            </uni-forms-item>
            <uni-forms-item name="redirect" label="重定向地址">
              <uni-easyinput type="text" v-model="model.redirect" />
            </uni-forms-item>
            <uni-forms-item name="visible" label="显示状态">
              <uni-data-checkbox v-model="model.visible" :localdata="visibleData" />
            </uni-forms-item>
            <uni-forms-item name="status" label="菜单状态">
              <uni-data-checkbox v-model="model.status" :localdata="statusData" />
            </uni-forms-item>
          </template>

          <template v-else-if="model.menuType === 1">
            <uni-forms-item name="menuPath" label="路由地址">
              <uni-easyinput type="text" v-model="model.menuPath" placeholder="请输入路由地址" />
            </uni-forms-item>
            <uni-forms-item name="component" label="组件路径">
              <uni-easyinput type="text" v-model="model.component" placeholder="请输入组件路径" />
            </uni-forms-item>
            <uni-forms-item name="query" label="路由参数">
              <uni-easyinput type="text" v-model="model.query" />
            </uni-forms-item>
            <uni-forms-item name="menuCode" label="权限标识">
              <uni-easyinput type="text" v-model="model.menuCode" placeholder="请输入权限标识" />
            </uni-forms-item>
            <uni-forms-item name="isFrame" label="外部链接">
              <uni-data-checkbox v-model="model.isFrame" :localdata="whetherData" />
            </uni-forms-item>
            <uni-forms-item name="isTabClose" label="标签关闭">
              <uni-data-checkbox v-model="model.isTabClose" :localdata="whetherData" />
            </uni-forms-item>
            <uni-forms-item name="visible" label="显示状态">
              <uni-data-checkbox v-model="model.visible" :localdata="visibleData" />
            </uni-forms-item>
            <uni-forms-item name="status" label="菜单状态">
              <uni-data-checkbox v-model="model.status" :localdata="statusData" />
            </uni-forms-item>
          </template>

          <template v-else>
            <uni-forms-item name="menuCode" label="权限标识">
              <uni-easyinput type="text" v-model="model.menuCode" placeholder="请输入权限标识" />
            </uni-forms-item>
            <uni-forms-item name="status" label="菜单状态">
              <uni-data-checkbox v-model="model.status" :localdata="statusData" />
            </uni-forms-item>
          </template>
        </uni-forms>
        <button type="primary" @click="handleSubmit('valiForm')">提交</button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { updateMenu, getTreeMenuList, getMenuDetail } from "@/api/system/menu";
export default {
  data() {
    return {
      model: {
        parentId: 0,
        menuType: 0,
        orderNum: 1,
        isFrame: 0,
        isTabClose: 0,
        visible: 0,
        status: 0,
      },
      menuData: [],
      fieldsName: {
        key: "key",
        label: "menuName",
        children: "children",
      },
      whetherData: [
        { text: "否", value: 0 },
        { text: "是", value: 1 },
      ],
      typeData: [
        { text: "目录", value: 0 },
        { text: "菜单", value: 1 },
        { text: "按钮", value: 2 },
      ],
      visibleData: [
        { text: "显示", value: 0 },
        { text: "隐藏", value: 1 },
      ],
      statusData: [
        { text: "正常", value: 0 },
        { text: "停用", value: 1 },
      ],
      rules: {
        menuName: {
          rules: [{ required: true, errorMessage: "请输入菜单名称" }],
        },
      },
    };
  },
  onLoad(options) {
    if (options.id) this.model.menuId = options.id;
  },
  created() {
    getTreeMenuList().then((res) => {
      const menuData = { key: 0, menuName: "主目录", children: res };
      this.menuData = [menuData];
    });
    getMenuDetail(this.model.menuId).then((res) => (this.model = res));
  },
  methods: {
    menuTypeChange() {
      const { parentId, menuName, menuType, menuIcon, orderNum } = this.model;
      const current = { parentId, menuName, menuType, menuIcon, orderNum };
      const defaultData = {
        orderNum: 1,
        isFrame: 0,
        isTabClose: 0,
        visible: 0,
        status: 0,
        ...current,
      };
      this.model = defaultData;
    },
    async handleSubmit(refName) {
      const values = await this.$refs[refName].validate();
      values.menuId = this.model.menuId;
      this.$message.loading("提交中...", 0);
      await updateMenu(values);
      setTimeout(() => {
        this.$tab.navigateBack();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.update {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px;
}
</style>
